<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <base th:href="@{/}">
    <meta charset="UTF-8"/>
    <title>尚硅谷会员注册页面</title>
    <link type="text/css" rel="stylesheet" href="static/css/style.css"/>
    <link rel="stylesheet" href="static/css/register.css"/>
    <style type="text/css">
        .login_form {
            height: 420px;
            margin-top: 25px;
        }
    </style>
</head>
<body>
<div id="app">
    <div id="login_header">
        <a href="index.html">
            <img class="logo_img" alt="" src="static/img/logo.gif"/>
        </a>
    </div>

    <div class="login_banner">
        <div class="register_form">
            <h1>注册尚硅谷会员</h1>
            <form action="user?method=doRegister" method="post">
                <div class="form-item">
                    <div>
                        <label>用户名称:</label>
                        <!-- blur事件 元素失去焦点时，触发该事件   -->
                        <input id="username" name="username" v-model="user.username" type="text" placeholder="请输入用户名"
                               @blur="checkUserName"/>
                    </div>
                    <span style="color: red">{{ usernameErrorMessage }}</span>
                    <!--  FIX BUG 声明式渲染失败   -->
                    <!--  插值表达式不支持对象属性表达，只支持直接属性渲染   -->
                    <!--   <span style="color: red">{{user.usernameErrorMessage }}</span>-->
                </div>
                <div class="form-item">
                    <div>
                        <label>用户密码:</label>
                        <input type="password" name="password" v-model="user.password" placeholder="请输入密码" @blur=""/>
                    </div>
                    <span style="color: red">{{passwordErrorMessage}}</span>
                </div>
                <div class="form-item">
                    <div>
                        <label>确认密码:</label>
                        <input type="password" placeholder="请输入确认密码" name="confirmPassword"
                               v-model="user.confirmPassword"/>
                    </div>
                    <span style="color: red"> {{confirmErrorMessage}}</span>
                </div>
                <div class="form-item">
                    <div>
                        <label>用户邮箱:</label>
                        <input type="text" placeholder="请输入邮箱" name="email" v-model="user.email"/>
                    </div>
                    <span style="color: red">{{emailErrorMessage}}</span>
                </div>
                <div class="form-item">
                    <div>
                        <label>验证码:</label>
                        <div class="verify">
                            <input style="width: 110px;" type="text" placeholder="" name="code" v-model="user.code"/>
                            <img style="width: 150px; height: 40px;" :src="checkCodePath" @click="changeCode" alt=""/>
                        </div>
                    </div>
                    <span style="color: red">{{codeErrorMessage}}</span>
                </div>
                <button class="btn" type="submit" @click="signUp">注册</button>
            </form>
        </div>
    </div>
    <div id="bottom">
        <div th:include="segment/footer :: copyright"></div>
    </div>

</div>


<script src="static/script/vue.js"></script>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            user: {
                username: "[[${param.username}]]",
                email: "[[${param.email}]]",
            },
            code: "", // 验证码
            checkCodePath: "", // 验证码的接口
            usernameErrorMessage: "[[${usernameErrorMessage}]]",
            passwordErrorMessage: null,
            confirmErrorMessage: null,
            emailErrorMessage: null,
            codeErrorMessage: "[[${codeErrorMessage}]]"

        },
        created() {
            this.changeCode()
        },
        methods: {
            //校验用户名是否符合规则
            checkUserName() {
                //1. 编写一个正则表达式去描述这个规则
                const usernameRegExp = /^[A-Za-z0-9_]{5,8}$/;
                //2. 使用正则表达式校验用户名输入框里面的内容
                // if (!usernameRegExp.test(this.username)) {
                if (!usernameRegExp.test(this.user.username)) {
                    //校验不通过
                    this.usernameErrorMessage = "用户名必须是5-8位的数字、字母或者下划线"
                    return false
                } else {
                    //符合规则了,就重新设置提示信息为空
                    this.usernameErrorMessage = ""
                    return true
                }
            },
            signUp() {
                // 1. 校验用户名是否符合规则
                if (!this.checkUserName()) {
                    // 如果用户名不符合规则，那么就阻止默认事件
                    event.preventDefault()
                    return
                }
                // 2. 校验密码
                //2.1 编写一个正则表达式去描述密码校验的规则
                const passwordRegExp = /^[A-Za-z0-9_]{6,10}$/;
                //2.2 使用正则表达式校验密码
                if (!passwordRegExp.test(this.user.password)) {
                    //密码不符合规则，那么就阻止默认事件
                    event.preventDefault()
                    this.passwordErrorMessage = "密码必须是6-10位的数字、字母或者下划线"
                    return
                } else {
                    this.passwordErrorMessage = ""
                }
                // 3 校验确认密码
                if (this.user.password !== this.user.confirmPassword) {
                    event.preventDefault()
                    this.confirmErrorMessage = "两次输入的密码必须一致"
                    return
                } else {
                    this.confirmErrorMessage = ""
                }

                // 4. 校验邮箱
                const emailRegExp = /^[a-zA-Z0-9_\.-]+@([a-zA-Z0-9-]+[\.]{1})+[a-zA-Z]+$/;
                if (!emailRegExp.test(this.user.email)) {
                    event.preventDefault()
                    this.emailErrorMessage = "邮箱格式不正确"
                    return
                } else {
                    this.emailErrorMessage = ""
                }
            },
            changeCode() {
                this.checkCodePath = "kaptcha?time=" + new Date()
            }
        }
    })
</script>
</body>
</html>
